<template>
  <div class="admin-container">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <el-menu :default-active="activeMenu" class="admin-menu" @select="handleMenuSelect">
          <el-menu-item index="dashboard">
            <el-icon><DataBoard /></el-icon>
            <span>仪表盘</span>
          </el-menu-item>
          <el-menu-item index="users">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="content">
            <el-icon><Document /></el-icon>
            <span>内容管理</span>
          </el-menu-item>
          <el-menu-item index="logs">
            <el-icon><List /></el-icon>
            <span>系统日志</span>
          </el-menu-item>
          <el-menu-item index="security">
            <el-icon><Lock /></el-icon>
            <span>安全设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-container>
        <el-header>
          <div class="header-content">
            <h2>后台管理系统</h2>
            <el-dropdown @command="handleLogout">
              <span class="admin-user">
                管理员 <el-icon><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <el-main>
          <!-- 仪表盘 -->
          <div v-if="activeMenu === 'dashboard'" class="dashboard">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card>
                  <div class="stat-card">
                    <div class="stat-number">{{ stats.userCount }}</div>
                    <div class="stat-label">总用户数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <div class="stat-card">
                    <div class="stat-number">{{ stats.noteCount }}</div>
                    <div class="stat-label">总笔记数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <div class="stat-card">
                    <div class="stat-number">{{ stats.todayActive }}</div>
                    <div class="stat-label">今日活跃</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <div class="stat-card">
                    <div class="stat-number">{{ stats.systemLoad }}%</div>
                    <div class="stat-label">系统负载</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>

          <!-- 用户管理 -->
          <div v-if="activeMenu === 'users'" class="users">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>用户管理</span>
                  <el-button type="primary" @click="showUserDialog = true">添加用户</el-button>
                </div>
              </template>
              <el-table :data="userList" style="width: 100%">
                <el-table-column prop="id" label="ID" width="180" />
                <el-table-column prop="username" label="用户名" />
                <el-table-column prop="email" label="邮箱" />
                <el-table-column prop="role" label="角色">
                  <template #default="scope">
                    <el-tag :type="scope.row.role === 'admin' ? 'danger' : 'info'">
                      {{ scope.row.role === "admin" ? "管理员" : "普通用户" }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                  <template #default="scope">
                    <el-switch v-model="scope.row.status" @change="updateUserStatus(scope.row)" />
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button size="small" @click="editUser(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </div>

          <!-- 内容管理 -->
          <div v-if="activeMenu === 'content'" class="content">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>内容管理</span>
                  <el-button type="primary" @click="refreshContent">刷新</el-button>
                </div>
              </template>
              <el-table :data="contentList" style="width: 100%">
                <el-table-column prop="id" label="ID" width="180" />
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="username" label="作者" />
                <el-table-column prop="type" label="类型">
                  <template #default="scope">
                    <el-tag :type="scope.row.type === 1 ? 'success' : 'warning'">
                      {{ scope.row.type === 1 ? "图片" : "视频" }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                  <template #default="scope">
                    <el-select v-model="scope.row.status" @change="updateContentStatus(scope.row)">
                      <el-option label="正常" value="normal" />
                      <el-option label="审核中" value="pending" />
                      <el-option label="已禁用" value="disabled" />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button size="small" @click="viewContent(scope.row)">查看</el-button>
                    <el-button size="small" type="danger" @click="deleteContent(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </div>

          <!-- 系统日志 -->
          <div v-if="activeMenu === 'logs'" class="logs">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>系统日志</span>
                  <el-button type="primary" @click="refreshLogs">刷新</el-button>
                </div>
              </template>
              <el-table :data="logList" style="width: 100%">
                <el-table-column prop="timestamp" label="时间" width="180" />
                <el-table-column prop="level" label="级别">
                  <template #default="scope">
                    <el-tag :type="getLogLevelType(scope.row.level)">
                      {{ scope.row.level }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="message" label="消息" />
                <el-table-column prop="duration" label="耗时(ms)" width="100" />
              </el-table>
            </el-card>
          </div>

          <!-- 安全设置 -->
          <div v-if="activeMenu === 'security'" class="security">
            <el-card>
              <template #header>
                <span>安全设置</span>
              </template>
              <el-form :model="securityForm" label-width="120px">
                <el-form-item label="密码策略">
                  <el-select v-model="securityForm.passwordPolicy">
                    <el-option label="低" value="low" />
                    <el-option label="中" value="medium" />
                    <el-option label="高" value="high" />
                  </el-select>
                </el-form-item>
                <el-form-item label="登录失败限制">
                  <el-input-number v-model="securityForm.loginAttempts" :min="1" :max="10" />
                </el-form-item>
                <el-form-item label="会话超时(分钟)">
                  <el-input-number v-model="securityForm.sessionTimeout" :min="5" :max="1440" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { DataBoard, User, Document, List, Lock, ArrowDown } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();
const activeMenu = ref("dashboard");

// 统计数据
const stats = ref({
  userCount: 1250,
  noteCount: 8560,
  todayActive: 342,
  systemLoad: 65,
});

// 用户列表
const userList = ref([
  { id: "1", username: "admin", email: "admin@example.com", role: "admin", status: true },
  { id: "2", username: "user1", email: "user1@example.com", role: "user", status: true },
  { id: "3", username: "user2", email: "user2@example.com", role: "user", status: false },
]);

// 内容列表
const contentList = ref([
  { id: "1", title: "测试笔记1", username: "user1", type: 1, status: "normal" },
  { id: "2", title: "测试视频1", username: "user2", type: 2, status: "pending" },
]);

// 日志列表
const logList = ref([
  { timestamp: "2024-01-15 10:30:00", level: "INFO", message: "用户登录成功", duration: 120 },
  { timestamp: "2024-01-15 10:29:00", level: "WARN", message: "API调用频率过高", duration: 50 },
  { timestamp: "2024-01-15 10:28:00", level: "ERROR", message: "数据库连接失败", duration: 2000 },
]);

// 安全设置
const securityForm = ref({
  passwordPolicy: "medium",
  loginAttempts: 5,
  sessionTimeout: 30,
});

const showUserDialog = ref(false);

// 菜单选择
const handleMenuSelect = (index: string) => {
  activeMenu.value = index;
};

// 退出登录
const handleLogout = () => {
  router.push("/login");
  ElMessage.success("已退出登录");
};

// 更新用户状态
const updateUserStatus = (user: any) => {
  ElMessage.success(`用户 ${user.username} 状态已更新`);
};

// 编辑用户
const editUser = (user: any) => {
  ElMessage.info(`编辑用户: ${user.username}`);
};

// 删除用户
const deleteUser = (user: any) => {
  ElMessage.warning(`删除用户: ${user.username}`);
};

// 刷新内容
const refreshContent = () => {
  ElMessage.success("内容列表已刷新");
};

// 更新内容状态
const updateContentStatus = (content: any) => {
  ElMessage.success(`内容 ${content.title} 状态已更新`);
};

// 查看内容
const viewContent = (content: any) => {
  ElMessage.info(`查看内容: ${content.title}`);
};

// 删除内容
const deleteContent = (content: any) => {
  ElMessage.warning(`删除内容: ${content.title}`);
};

// 刷新日志
const refreshLogs = () => {
  ElMessage.success("日志列表已刷新");
};

// 获取日志级别样式
const getLogLevelType = (level: string) => {
  switch (level) {
    case "ERROR":
      return "danger";
    case "WARN":
      return "warning";
    case "INFO":
      return "info";
    default:
      return "info";
  }
};

// 保存安全设置
const saveSecuritySettings = () => {
  ElMessage.success("安全设置已保存");
};

onMounted(() => {
  // 初始化数据
});
</script>

<style lang="less" scoped>
.admin-container {
  height: 100vh;

  .admin-menu {
    height: 100%;
    border-right: none;
  }

  .el-header {
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;

      .admin-user {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
      }
    }
  }

  .el-main {
    background-color: #f5f5f5;
    padding: 20px;

    .dashboard {
      .stat-card {
        text-align: center;

        .stat-number {
          font-size: 24px;
          font-weight: bold;
          color: #409eff;
        }

        .stat-label {
          margin-top: 10px;
          color: #666;
        }
      }
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
